<html>
    <head>
        <!-- Because I can -->
        <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script>jQuery.noConflict();</script>
        <script src="/extjs/adapter/prototype/ext-prototype-adapter.js"></script>
        <script src="/extjs/ext-all-debug.js"></script>        
        <link href="/extjs/resources/css/ext-all.css" type="text/css"  rel="stylesheet" />
        <script src="/lib/jquery.color.js"></script>
        
    </head>
    <body>        
        <script>
            var ticTacToe = function(){
                var self = this;
                var templatePath = "./ticTacTemplate.html";
                
                var clickHandler = function(e){                    
                    //Recieves a plan/jQuery managed event object                    
                    var element = e.target;
                    var parent  = element.parentNode;                    
                    var x,y;                    
                    coords = el2c(element);
                    
                    if(isValid(element)){
                        jQuery(element).data("player",1).animate({backgroundColor:"blue"},1000);                                        
                    }else{
                        jQuery(element).data("player",2).animate({backgroundColor:"red"},1000);                        
                    }
                    
                    console.log("Coordinate " + x + "," + y);
                };
                
                var el2c    = function(element){
                    //Below is fine for 0-9 scenario's but will need to be refactored for more
                    //advanced/larger grids.
                        var y = element.classNames().detect(function(cls) { if( /y\d/.match(cls)){ return true; }})[1];
                        var x = parent.classNames().detect(function(cls) { if( /x\d/.match(cls)){ return true;}})[1];
                        return (x, y);                    
                }
                
                var isValid = function(element){
                    //Semi-annoying, some browsers appear to convert color codes to RGB values                    
                    if(jQuery(element).data("player") >= 1){
                        return false;
                    }
                    return true;
                };
                
                var main = new Ext.Window({
                    title: "Tic-Tac-Toe",                
                    id: "tttBoard",
                    height: 250, width: 250,                
                    autoLoad: templatePath
                });
                
                                            
                self.run = function(manager){
                    main.show();
                    jQuery("#tttBoard td").live("click", clickHandler);
                };
        
                self.stop = function(){
                    main.hide();
                };
                
                try{
                    wm.sys.register("Tic-Tac-Toe", self);
                }catch(e){
                    //console.error(e);
                }
            };
            
            var x = new ticTacToe();
            x.run();
            
        </script>
    </body>
</html>